<template>
  <div class="app-container">
    <el-card class="filter-container">
      <el-button type="text">当前相簿：</el-button>
      <el-tag
        effect="dark"
        type="success"
      >{{ albumName }}</el-tag>
    </el-card>
    <el-card class="filter-container">
      <div>
        <i class="el-icon-search" />
        <span>筛选</span>
        <div class="filter-btn">
          <el-button
            icon="el-icon-search"
            type="primary"
            size="small"
            @click="getList()"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-setting"
            size="small"
            @click="handleResetSearch()"
          >
            重置
          </el-button>

        </div>
      </div>
      <div style="margin-top: 15px">
        <el-form inline :model="listQuery" size="small" label-width="140px">
          <el-form-item label="上传时间：">
            <el-date-picker
              v-model="searchDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            />
          </el-form-item>
          <el-form-item label="星级：">
            <div class="star-query">
              <el-slider
                v-model="star"
                show-stops
                range
                :max="5"
              />
            </div>

          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="filter-container">
      <div>
        <el-button type="text">操作</el-button>
        <div class="filter-btn">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="add"
          >
            添加
          </el-button>

          <el-button
            v-show="isEdit === 0"
            type="danger"
            size="mini"
            icon="el-icon-edit"
            @click="_=> isEdit = 1"
          >
            编辑
          </el-button>

          <el-button
            v-show="isEdit === 1"
            type="danger"
            size="mini"
            icon="el-icon-close"
            @click="_=> isEdit = 0"
          >
            退出编辑
          </el-button>
        </div>

      </div>

    </el-card>
    <div v-viewer class="card-container">
      <el-timeline>

        <el-timeline-item v-for="(photoTime, index) in photoTimeList" :key="index" :timestamp="photoTime.date" placement="top">
          <el-row :gutter="24">
            <el-col v-for="(photo, photoIndex) in photoTime.photoList" :key="photoIndex" :span="4">
              <el-card>
                <div class="box-card-header">
                  <img :src="photo.url">
                </div>
                <div style="padding: 14px;">
                  <div class="bottom">
                    <el-rate
                      v-model="photo.star"
                      show-text
                      @change="changeStar(photo)"
                    />

                    <mallki class-name="mallki-text" :text="photo.createTime | parseTime('{y}-{m}-{d}')" />

                    <div v-show="isEdit === 1" class="filter-btn">
                      <el-button size="small" type="danger" @click="remove(photo)">删除</el-button>
                    </div>
                  </div>

                </div>
              </el-card>
            </el-col>
          </el-row>

        </el-timeline-item>
      </el-timeline>
    </div>

  </div>
</template>
<script>
import {
  getList,
  updateStar,
  removeById
} from '@/api/life/photo'

import {
  getById as getAlbum
} from '@/api/life/album'

import Mallki from '@/components/TextHoverEffect/Mallki'

const defaultListQuery = {
  pageNum: 1,
  pageLimit: 10
}

export default {
  name: 'PhotoList',
  components: {
    Mallki
  },
  data() {
    return {
      searchDate: null,
      star: null,
      albumName: '',
      isEdit: 0,

      listQuery: {},
      photoList: [],

      total: 0,
      listLoading: true,
      photoTimeList: []
    }
  },
  watch: {
    searchDate: function(newValue) {
      if (newValue != null) {
        this.listQuery.startTime = newValue[0]
        this.listQuery.endTime = newValue[1]
      } else {
        this.listQuery.startTime = null
        this.listQuery.endTime = null
      }
    },
    star: function(newValue) {
      if (newValue != null) {
        this.listQuery.startstar = newValue[0]
        this.listQuery.endstar = newValue[1]
      } else {
        this.listQuery.startstar = null
        this.listQuery.endstar = null
      }
    }
  },
  created() {
    this.getAlbum()
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.listLoading = false
        this.photoTimeList = response.data
      })
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    getAlbum() {
      const { albumId } = this.$route.query

      if (albumId) {
        this.albumId = albumId
        getAlbum(albumId).then(res => {
          this.albumName = res.data.name
        })
      } else {
        this.$router.push({
          path: '/life/album/list'
        })
      }
    },
    remove(row) {
      this.$confirm('是否要删除照片', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    add() {
      this.$router.push({
        path: '/life/album/photo-add',
        query: {
          albumId: this.albumId
        }})
    },
    changeStar(photo) {
      updateStar(photo.id, { star: photo.star }).then(_ => {

      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.box-card-header {
  position: relative;
  height: 150px;
  img {
    width: 100%;
    transition: all 0.2s linear;
    &:hover {
      transform: scale(1.1, 1.1);
      filter: contrast(130%);
    }
  }
}

.bottom{
  text-align: center
}

.star-query{
  width:200px
}

</style>
